<template>
    <div>
      <van-nav-bar :title=path left-text="返回" left-arrow @click-left="onClickLeft" />
  
      <div id="container"></div>
      <div id="container1"></div>
  
      <span>
        {{ local }}
      </span>
  
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, onUnmounted } from 'vue'
  import { useRoute } from 'vue-router';
  import AMapLoader from "@amap/amap-jsapi-loader";
  import axios from 'axios';
  const route = useRoute()
  let map = null;
  let path = ref('')
  let local = ref('')
  const onClickLeft = () => history.back();
  let address = null;
  // let localPath = "" + local.value
  
  // 获取医院名
  onMounted(() => {
    path.value = route.query.name
    console.log(path.value)
  })
  
  // 获取地图localtion
  onMounted(() => {
    axios({
      method: 'get',
      url: `https://restapi.amap.com/v5/place/text?key=3d80139c80a4a5ef7772a87b8c9c38fe&keywords=${path.value}&page_size=1`
    }).then((res) => {
      console.log(res.data)
      local.value = res.data.pois[0].location
      address = local.value.split(',')
      // console.log('<<<<',address)   
  
      window._AMapSecurityConfig = {
        securityJsCode: "06499206b6bd21c31d6f1174d8ddc8c4",
      };
      AMapLoader.load({
        key: "0e07cdc72bc3537427119682d8291661", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.PlaceSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: address, // 初始化地图中心点位置
          });
          AMap.plugin(["AMap.PlaceSearch"], function () {
            const placeSearch = new AMap.PlaceSearch({
              pageSize: 5, //单页显示结果条数
              pageIndex: 1, //页码
              city: address, //兴趣点城市
              citylimit: true, //是否强制限制在设置的城市内搜索
              map: map, //展现结果的地图实例
              panel: "container1", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
              autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
            });
            placeSearch.search(path.value, function (status, result) {
              console.log(result);
              //查询成功时，result 即对应匹配的 POI 信息
            }); //使用插件搜索关键字并查看结果
          });
  
        })
        .catch((e) => {
          console.log(e);
        });
  
    }).catch((err) => {
      console.log(err)
    })
  })
  
  onUnmounted(() => {
    map?.destroy();
  });
  
  
  </script>
  <style scoped>
  #container {
    width: 100%;
    height: 300px;
  }
  </style>